<template>
  <el-select
    v-model="pro_id"
    size="small"
    :remote-method="selPros"
    remote
    filterable
    clearable
    style="width: 100%"
    placeholder="请选择项目名称"
    @focus="selPros"
  >
    <el-option
      v-for="item in pors"
      :key="item.key"
      :label="item.value"
      :value="item.key"
    />
  </el-select>
</template>

<script>
import { getToken, setToken } from '@/utils/token/pro'
import { selPros } from '@/api/project'

export default {
  name: 'ProFilter',
  props: {
    value: {
      type: String,
      default: ''
    },
    getData: {
      type: Function,
      default: function() {}
    }
  },
  data() {
    return {
      pors: [],
      pro_id: null
    }
  },
  watch: {
    'pro_id': {
      handler(n, o) {
        setToken(n ? n : '')
        this.$emit('input', this.pro_id)
        this.getData()
      },
      immediate: false
    },
    value: {
      handler(n, o) {
        this.pro_id = n
      },
      immediate: false
    }
  },
  created() {
    this.selPros('', getToken())
    this.$set(this, 'pro_id', getToken())
  },
  methods: {
    selPros(query, id) {
      let str = ''
      if (Object.prototype.toString.call(query) === '[object String]') str = query
      selPros({ name: str, id: id ? id : '' }).then(response => {
        this.pors = response.pros
      }).catch(err => {
        this.$message.error(err)
      })
    }
  }
}
</script>

<style scoped>
</style>
